<template>
  <view class="container">
    <view class="list-item1">
      <u-button @click="setChartType('bar')">分布统计</u-button>
      <u-button @click="setChartType('line')">增长趋势</u-button>
    </view>
    <view>
      <BarChart v-if="chartType === 'bar'" class="echart" :chartData="barData"/> <!-- 柱状图 -->
      <LineChart v-if="chartType === 'line'" class="echart" :chartData="lineData"/> <!-- 线型图 -->
    </view>
  </view>
</template>

<script>
  import BarChart from '../echarts/barChart.vue';
  import LineChart from '../echarts/lineChart.vue';
  import {getTouristOwnerDistCount, getTouristOwnerTrendCount} from "@/common/api/hub_ygzw/statistical/statistical.js";
  export default {
    components: {
      BarChart,
      LineChart,
    },
    mounted() {
      this.getTouristOwnerDistCount()
    },
    data() {
      return {
        barData: null,
        lineData: null,
        chartType: '',
        areacode: '420000'
      };
    },
    methods: {
      getTouristOwnerDistCount() {
        getTouristOwnerDistCount().then((res) => {
          if (res.statusCode === 200) {
            var result = [];
            res.data.data.forEach(item => {
              var object = {};
              object.label = item.areaName;
              object.value = item.count;
              result.push(object);
            })
            this.barData = result;
            this.chartType = 'bar';
          } else {
            uni.showToast({ title: res.message || "发送失败", icon: "none" });
          }
        })
      },
      getTouristOwnerTrendCount(areacode) {
        getTouristOwnerTrendCount(areacode).then((res) => {
          if (res.statusCode === 200) {
            const result = [];
            const transtypeList = [...new Set(res.data.data.map(item => item.transtype))];
            transtypeList.forEach(transtype => {
              const series = {
                name: transtype,
                labels: [],
                values: []
              };
              for (let year = 2020; year <= 2024; year++) {
                const item = res.data.data.find(d => d.year === year.toString() && d.transtype === transtype);
                series.labels.push(`${year}`);
                series.values.push(item ? item.count : 0); // 如果没有数据，默认为0
              }
              result.push(series);
            });
            this.lineData = result;
            console.log(result)
            this.chartType = 'line';
          } else {
            uni.showToast({ title: res.message || "发送失败", icon: "none" });
          }
        })
      },
      setChartType(type) {
        if (type === 'bar') {
          this.getTouristOwnerDistCount()
        } else if (type === 'line') {
          if (this.areacode === '') {
            uni.showToast({ title: "请选择省份", icon: "none" });
            return;
          }
          this.getTouristOwnerTrendCount(this.areacode)
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 10px;
    background-color: #f3f6fa;
    height: 100vh;
    box-sizing: border-box;

    .list-item1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      height: 32px;
      background-color: #ebeef6;
      border-radius: 3px;
    }

    .echart {
      margin-top: 30px;
    }

    .list-container {
      margin-top: 20px;
      border-radius: 4px;
      overflow: hidden; // 避免边框溢出
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      transition: background-color 0.3s;
    }

    .even-row {
      background-color: #f9f9f9; // 隔行换色 - 偶数行
    }

    .odd-row {
      background-color: #ffffff; // 隔行换色 - 奇数行
    }
  }
</style>
